<template>
  <CustomEcharts :id="props.id" :height="height" :full-options="echartsOptions" :loading="false">
  </CustomEcharts>
</template>

<script setup>
// 引进Echarts 组件
import { onMounted, reactive, defineProps, watch } from "vue";
import CustomEcharts from './customEcharts.vue';
import * as echarts from 'echarts';

const props = defineProps({
  echartsData: Object,
  height:String,
  id:String,
  deptName:String
});
const echartsOptions = reactive({
  options: {},
  init: false
});
const testOption = (data, dimensions) => {

  var data = [];
  var color = ['#fd566a', '#9787ff', '#fdb36a', '#fdd56a', '#6da7ff', '#63e1f2', '#ff3000'];

  
  props.echartsData.forEach((element, index) => {
    data.push(
      {
        value: element.value,
        name: element.name,
        itemStyle: {
          normal: {
            borderRadius: 100,
            borderWidth: 5,
            borderColor: color[index],
          },
        },

      },
      {
        value: 0.01,
        name: '',
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0,0,0,0)",
            borderWidth: 0,
          },
        },
      }
    )
  });



 
  var seriesOption = [
    {
      name: "",
      type: "pie",
      radius: [43,62],
      center: ["50%", "50%"],
      label: {
        show: false,
      },
      itemStyle: {
        normal: {
         
          color: "#EEF2F9",
        },
      },
      hoverAnimation: false,
      data: [100],
    },
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius:  [51,54],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'outside',

            formatter: function (params) {
              var percent = 0;
              var total = 0;
              for (var i = 0; i < props.echartsData.length; i++) {
                total += props.echartsData[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== '') {
                return params.name + '\t' + percent + '%';
              } else {
                return '';
              }
            },
          },
          labelLine: {
            length: 10,
            length2: 30,
            show: true,
            color: '#00ffff',
          },
        },
      },
      data: data,
    },
  ];
  const option = {
    color: color,
    title: [{
      text: props.deptName,
      top: '38%',
      textAlign: 'center',
      left: '49.50%',
      borderRadius: 100,
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: '400',
      },
    }, {
      text: '收费站',
      top: '50%',
      textAlign: 'center',
      left: '49.50%',
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: '400',
      },
    }],
 
    tooltip: {
      show: false,
    },

    toolbox: {
      show: false,
    },
    series: seriesOption,
  };
  return option;
}
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [];
  const testDimensions = ['name', 'value'];
  echartsOptions.options = testOption(testData, testDimensions);
});
</script>